<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>

	<body>
		<!-- x和y属性决定了文字的绘制起点; 如果设置为了一个数列则会应用到每一个字符上 -->
		x和y
		<svg>
			<text x="100" y="50" fill="red">I love SVG</text>

			<text x="30 60 90 120 150 180 210 240 270" y="60 90 120 150 180 150 120 90 60">I love SVG</text>
		</svg>

		<!-- dx和dy属性是相对于当前位置的偏移量。 -->
		dx和dy
		<svg>
			<text dx="50 10 10 10 10 10 10 10 10" dy="50 20 -20 20 -20 20 -20 20 -20">I love SVG</text>
		</svg>

		<!-- transform=rotate(r x,y) r 旋转角度，x、y定义旋转圆心，默认 0,0 x和y的值可以是一个数列。 -->
		transform=rotate
		<svg>
			<text x="100" y="50" fill="red" transform="rotate(90 130,50)">I love SVG</text>
		</svg>

		<!-- rotate属性可以把文字旋转一个角度。 -->
		rotate
		<svg>
			<text x="50" y="50" rotate="20">I love SVG</text>
		</svg>

		defs
		<svg>
			<!-- 路径上的文字： -->
			<defs>
				<path id="path1" d="M75,20 a1,1 0 0,0 100,0" />
			</defs>
			<text x="10" y="100" style="fill: red">
				<textPath xlink:href="#path1">I love SVG I love SVG</textPath>
			</text>
		</svg>

		tspan
		<svg>
			<!-- 每个<tspan> 元素可以包含不同的格式和位置 -->
			<text x="10" y="20" style="fill: red">
				Several lines:
				<tspan x="50" y="45">First line</tspan>
				<tspan x="50" y="70">Second line</tspan>
			</text>
		</svg>

		xlink
		<svg>
			<!-- 作为链接文本（ <a> 元素） -->
			<a xlink:href="http://www.w3schools.com/svg/" target="_blank">
				<text x="0" y="15" fill="red">I love SVG</text>
			</a>
		</svg>

		<style>
			svg {
				/* 默认 宽300 高150 */
				border: 1px solid red;
			}
		</style>
	</body>
</html>
